import 'package:flutter/material.dart';
import 'package:flutter_xc/model/home_model.dart';
import 'package:flutter_xc/widget/webview.dart';
import 'package:flutter_xc/util/navigator_util.dart';

/// 网格卡片
class GridNav extends StatelessWidget {
  final GridNavModel gridNavModel;

  // 构造函数接受传值,  而且是必传的
  const GridNav({Key key, @required this.gridNavModel})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PhysicalModel( // 设置圆角
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(6),
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: _gridItems(context),
      ),
    );
  }

  // 上中下的list 上中下
  _gridItems(BuildContext context) {
    List<Widget> items = [];
    if (gridNavModel == null) return items;

    if (gridNavModel.hotel != null) {
      items.add(_gridItem(context, gridNavModel.hotel, true));
    }
    if (gridNavModel.flight != null) {
      items.add(_gridItem(context, gridNavModel.flight, false));
    }
    if (gridNavModel.travel != null) {
      items.add(_gridItem(context, gridNavModel.travel, false));
    }
    return items;
  }

  // 单个的 左中右
  _gridItem(BuildContext context, GridNavItemModel gridItem, bool isFirst) {
    List<Widget> items = [];
    items.add(_mainItem(context, gridItem.mainItem));
    items.add(_doubleItem(context, gridItem.item1, gridItem.item2));
    items.add(_doubleItem(context, gridItem.item3, gridItem.item4));

    List<Widget> expandsItems = [];
    items.forEach((i) {
      expandsItems.add(Expanded(child: i, flex: 1,));
    });
    Color startColor = Color(int.parse('0xff' + gridItem.startColor));
    Color endColor = Color(int.parse('0xff' + gridItem.endColor));

    return Container(
      height: 88,
      margin: isFirst ? null : EdgeInsets.only(top: 3),
      decoration: BoxDecoration(
          gradient: LinearGradient(colors: [startColor, endColor])
      ),
      child: Row(
        children: expandsItems,
      ),
    );
  }

  // 左边的
  _mainItem(BuildContext context, CommonModel model) {
    return Stack(
      alignment: AlignmentDirectional.topCenter,
      children: <Widget>[
        Image.network(
          model.icon,
          fit: BoxFit.contain,
          width: 121,
          height: 88,
          alignment: AlignmentDirectional.bottomEnd,
        ),
        Container(
          margin: EdgeInsets.only(top: 11),
          child: Text(model.title, style: TextStyle(
              fontSize: 14,
              color: Colors.white
          ),),
        )
      ],
    );
  }

  // 中间和右边的俩的
  _doubleItem(BuildContext context, CommonModel topItem,
      CommonModel bottomItem) {
    return Column(
      children: <Widget>[
        Expanded(
          child: _item(context, topItem, true),
        ),
        Expanded(
          child: _item(context, bottomItem, false),
        )
      ],
    );
  }

  // 小个item
  _item(BuildContext context, CommonModel item, bool isFirst) {
    BorderSide borderSide = BorderSide(width: 0.8, color: Colors.white);
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: borderSide,
            bottom: isFirst ? borderSide : BorderSide.none,
          ),
        ),
        child: _wrapGesture(
            context,
            Center(
              child: Text(item.title, style: TextStyle(
                  fontSize: 14,
                  color: Colors.white
              ),),
            ),
            item
        ),
      ),
    );
  }

  // 点击事件的统一封装
  _wrapGesture(BuildContext context, Widget widget, CommonModel model) {
    return GestureDetector(
      onTap: () {
        NavigatorUtil.push(context,
            WebView(
              url: model.url,
              statusBarColor: model.statusBarColor,
              title: model.title,
              hideAppbar: model.hideAppbar,
            ));
      },
      child: widget,
    );
  }
}
